<template>
  <div class="user">
    <div class="userheader">
      <span class="iconfont icon-arrow-left-2" @click="back"></span>
      <span class="usertext">个人中心</span>
    </div>
    <div class="usercontent">
      <div class="card">
        <div class="cardimg">
          <img src="@/assets/avatar.jpg" alt="taptap" />
        </div>
        <div class="stext">欢迎您~ {{ username }}</div>
        <div class="inputarea">
          <div class="userbtn" @click="logout">退出登录</div>
          <div class="outres" v-if="outres">您已退出</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "user",
  data() {
    return {
      username: "aaa小淘气",
      outres: false,
    };
  },
  mounted() {
    this.username = localStorage.username;
  },
  methods: {
    logout() {
      this.outres = true;
      localStorage.clear();
      setTimeout(() => {
        this.$router.push("/");
      }, 1000);
    },
    back() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.user {
  align-items: center;
  height: 92vh;
  background: white;
  .userheader {
    position: relative;
    top: 8%;
    padding-left: 0.32rem;
    transform: translateY(-50%);
    .iconfont {
      font-size: 0.32rem;
    }
    .usertext {
      font-size: 0.32rem;
      font-weight: 700;
      margin-left: 0.32rem;
    }
  }
  .usercontent {
    background: white;
    padding-top: 12vh;
    height: 100%;
    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .cardimg img {
        width: 24vw;
        & {
          border-radius: 50%;
        }
      }
      .stext {
        color: $themeColor;
        margin-top: 0.5rem;
      }

      .inputarea {
        padding: 0 0.64rem;
        margin-top: 0.2rem;
        width: 80%;
        .tips {
          margin-top: 0.32rem;
          font-size: 0.24rem;
          line-height: 1.5em;
          & input {
            background: $themeColor;
          }
        }
        .userbtn {
          background: $themeColor;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.32rem;
          height: 0.9rem;
          border-radius: 0.4rem;
          font-size: 0.32rem;
          &:active {
            background: #319da6;
          }
        }
        .outres {
          text-align: center;
          font-size: 0.24rem;
          color: $themeColor;
          margin-top: 0.2rem;
        }
      }
    }
  }
}
</style>